<template>
  <div>
    <!-- 查询界面 -->
    <div class="top-panel">
      <el-form
        :model="searchFormData"
        label-width="80px"
        @submit.prevent
      >
        <el-row>
          <el-col :span="4">
            <el-form-item
              label="内容"
              prop="contentFuzzy"
            >
              <el-input
                clearable
                placeholder="支持模糊搜索"
                v-model="searchFormData.contentFuzzy"
                @keyup.native="loadDataList"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label="昵称"
              prop="nickNameFuzzy"
            >
              <el-input
                clearable
                placeholder="请输入名称"
                v-model="searchFormData.nickNameFuzzy"
                @keyup.native="loadDataList"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label="状态"
              prop="status"
            >
              <el-select
                clearable
                placeholder="请选择状态"
                v-model="searchFormData.status"
                :style="{ 'width': '100%' }"
              >
                <el-option
                  label="已删除"
                  :value="-1"
                ></el-option>
                <el-option
                  label="待审核"
                  :value="0"
                ></el-option>
                <el-option
                  label="已审核"
                  :value="1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="4"
            :style="{ 'padding-left': '10px' }"
          >
            <el-button-group>
              <el-button
                type="primary"
                size="default"
                @click="loadDataList"
              >搜索</el-button>
              <el-button
                type="success"
                @click="auditBatch"
                :disabled="selectBatchList.length == 0"
              >批量审批</el-button>
              <el-button
                type="danger"
                @click="delBatch"
                :disabled="selectBatchList.length == 0"
              >批量删除</el-button>
            </el-button-group>

          </el-col>
        </el-row>

      </el-form>
    </div>
    <!-- 数据展示 -->
    <div class="data-list">
      <Table
        ref="tableRef"
        :columns="columns"
        :showPagination="true"
        :dataSorce="tableData"
        :fetch="loadDataList"
        :options="tableOptions"
        @rowSelected="setRowSelected"
      >
        <!-- 用户信息 -->
        <template #userInfo="{ index, row }">
          <div class="user-info">
            <Avatar
              :userId="row.userId"
              :width="40"
            ></Avatar>
            <div class="name-info">
              <div>
                <a
                  :href="proxy.globalInfo.webDomain + 'user/' + row.userId"
                  target="_blank"
                  class="a-link"
                >{{ row.nickName }}</a>
              </div>
              <div>{{ row.userIpAddress }}</div>
            </div>
          </div>
        </template>
        <!-- 查看文章 -->
        <template #contentInfo="{ index, row }">
          <span>
            <a
              :href="proxy.globalInfo.webDomain + 'post/' + row.articleId"
              target="_blank"
              class="a-link"
            >查看文章</a>
          </span>
          <div v-html="row.content"></div>
          <div v-if="row.imgPath">
            <CommentImage
              :src="proxy.globalInfo.imageUrl + row.imgPath.replace('.', '_.')"
              :imgList="[proxy.globalInfo.imageUrl + row.imgPath]"
            >
            </CommentImage>
          </div>
        </template>
        <template #goodCount="{ index, row }">
          <span>{{ row.goodCount }}</span>
        </template>
        <!-- 状态 -->
        <template #status="{ index, row }">
          <span
            v-if="row.status === -1"
            :style="{ color: 'red' }"
          >已删除</span>
          <span
            v-if="row.status === 0"
            :style="{ color: 'red' }"
          >待审核</span>
          <span
            v-if="row.status === 1"
            :style="{ color: 'green' }"
          >已审核</span>
        </template>

        <!-- 操作信息 -->
        <template #op="{ index, row }">
          <div
            class="op"
            v-if="row.status === 0 || row.status === 1"
          >
            <el-dropdown trigger="click">
              <span class="iconfont icon-more"></span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="delComment(row)">删除</el-dropdown-item>
                  <el-dropdown-item
                    @click="audit(row)"
                    v-if="row.status === 0"
                  >审核</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </Table>
    </div>
  </div>
</template>

<script setup>
import CommentImage from './CommentImage.vue'
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
const { proxy } = getCurrentInstance();

const searchFormData = ref({
  boardIds: [],
})



const api = {
  loadComment: '/forum/loadComment',
  delComment: '/forum/delComment',
  auditComment: '/forum/auditComment'
}

// 列表
const columns = [
  {
    label: '用户信息',
    prop: 'avatar',
    width: 200,
    slotName: 'userInfo'
  },
  {
    label: '评论内容',
    prop: 'content',
    slotName: 'contentInfo'
  },
  {
    label: '点赞',
    width: 150,
    slotName: 'goodCount'
  },
  {
    label: '状态',
    prop: 'status',
    width: 100,
    slotName: 'status'
  },
  {
    label: '发布时间',
    prop: 'postTime',
    width: 180,
  },
  {
    label: '发布地址',
    prop: 'userIpAddress',
    width: 100,
  },
  {
    label: '操作',
    prop: 'op',
    width: 80,
    slotName: 'op'
  },
]

// 列表
const tableData = ref({})
const tableOptions = {
  extHeight: 32,
  selectType: 'checkbox'
}

const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo || 1,
    pageSize: tableData.value.pageSize || 15
  }
  Object.assign(params, searchFormData.value)

  let result = await proxy.Request({
    url: api.loadComment,
    params: params
  })
  if (!result) {
    return;
  }
  tableData.value = result.data
}

// 删除评论
const delComment = (data) => {
  proxy.Confirm(`你确定要删除该评论吗？`, async () => {
    let result = await proxy.Request({
      url: api.delComment,
      params: {
        commentIds: data.commentId
      }
    })
    if (!result) {
      return;
    }
    proxy.Message.warning('删除成功');
    loadDataList();
  })
}

// 审核
const audit = (data) => {
  proxy.Confirm(`你确定要审核该评论吗？`, async () => {
    let result = await proxy.Request({
      url: api.auditComment,
      params: {
        commentIds: data.commentId
      }
    })
    if (!result) {
      return;
    }
    proxy.Message.success('审核成功');
    loadDataList();
  })
}

// 批量选择
const selectBatchList = ref([])
const setRowSelected = (rows) => {
  selectBatchList.value = []
  rows.forEach((e) => {
    selectBatchList.value.push(e.commentId)
  })
}

const tableRef = ref()
const auditBatch = () => {
  proxy.Confirm('你确定要批量审核吗？', async () => {
    let result = await proxy.Request({
      url: api.auditComment,
      params: {
        commentIds: selectBatchList.value.join(',')
      }
    })
    if (!result) {
      return;
    }
    tableRef.value.clearSelection();
    proxy.Message.success('审核成功');
    loadDataList();
  })
}

const delBatch = () => {
  proxy.Confirm('你确定要批量删除吗？', async () => {
    let result = await proxy.Request({
      url: api.delComment,
      params: {
        commentIds: selectBatchList.value.join(',')
      }
    })
    if (!result) {
      return;
    }
    tableRef.value.clearSelection();
    proxy.Message.warning('删除成功');
    loadDataList();
  })
}
</script>

<style lang="scss" scoped>
.data-list {
  .user-info {
    display: flex;
    align-items: center;

    .name-info {
      margin-left: 5px;
      font-size: 13px;
    }
  }

  .op {
    .iconfont {
      cursor: pointer;
    }
  }
}
</style>
